/*
 * @Author: nengwu 409791297@qq.com
 * @Date: 2020-06-26 19:35:06
 * @LastEditors: mylesshie@gmail.com
 * @LastEditTime: 2020-08-04 22:37:53
 * @description:
 */

import React, { useState, useEffect } from 'react'
import { ScrollView, Text, View, TouchableWithoutFeedback } from 'react-native'
import styles from './styles'

const ScrollTabBar = props => {

  const onChangeIndex = index => {
    props.goToPage(index)
    props.onChange && props.onChange(index)
  }

  const _createTabs = () => {
    return props.tabs.map((item, index) => {
      return (
        <TouchableWithoutFeedback
          key={index}
          onPress={() => onChangeIndex(index)}
        >
          <View key={index} style={styles.tabItem}>
            <Text
              numberOfLines={1}
              style={props.activeTab === index ? styles.textActive : styles.text}
            >
              {item}
            </Text>
          </View>
        </TouchableWithoutFeedback>
      )
    })
  }

  return (
    <View style={styles.barWrap}>
      <ScrollView
        horizontal
        bounces
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.contentContainer}
        style={styles.wrap}
      >
        {_createTabs()}
      </ScrollView>
    </View>
  )
}

export default ScrollTabBar
